<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    </head>
    <body>

        <select name="" id="province">
            <option> 请选择</option>
            <option value="gx">广西</option>
            <option value="gd">广东</option>
            <option value="hb">河北</option>
            <option value="hn">河南</option>
        </select>
        <br>
        <hr>

        <select id="city">
            <option> 请选择</option>
        </select>


    </body>
    <script>
        let data = {
            'gx': ['南宁', '北海', '桂林'],
            'gd': ['深圳', '广州', '东莞']


        }


        $("#province").change(function() {

            console.log($(this).val());
            let province = $(this).val();
            //获取对应省的市区数据
            console.log(data[province]);
            let citys = data[province];
            //把城市加载到第二个下拉框中
            if (citys == undefined) {
                $("select[id='city']").empty();
                $("select[id='city']").append(" <option name=''> 请选择 </option>");
            } else {
                $("select[id='city']").empty();
                $("select[id='city']").append(" <option name=''> 请选择 </option>");
                citys.forEach(function(value, index, obj) {
                    $("select[id='city']").append(" <option name=''> " + value + " </option>");
                })
            }
        })
    </script>




</html>
